<template>
    <base-dialog  v-bind="$attrs" v-on="$listeners" :title="title" width="600px" @submit="toAdd" :no-button="disabled">
        <el-form  ref="elForm" label-width="80px" :model="formData" :rules="rules" :disabled="disabled">
            <el-form-item label="父级名称" prop="parent">
                <select-tree :appendToBody="true" zIndex="2100"  :list="categoryList" style="width: 100%;" v-model="formData.parent" size="small"></select-tree>
            </el-form-item>
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
        </el-form>
    </base-dialog>
</template>
<script>
    import BaseDialog from "@/components/Common/BaseDialog";
    import DetailDialog from "@/mixins/DetailDialog";
    import SelectTree from "@/components/Common/SelectTree";
    export default {
        name:"DetailDialog",
        mixins:[DetailDialog],
        data(){
          return {
              formData:{
                  name:"",
                  parent:undefined
              },
              rules:{
                  name: [
                      { required: true, message: "名称不能为空", trigger: "blur" }
                  ],
              },
              categoryList:[]
          }
        },
        created() {
            this.getCategoryList()
        },
        components: {SelectTree, BaseDialog},
        computed:{
            title() {
                return "新增分类"
            },
        },
        methods:{
            getCategoryList(){
               this.categoryList = this.$attrs.categoryList
            }
        }
    }
</script>
